<template>
  <div class="container">
    <div class="top">
      <span class="title">{{ getTitle() }}</span>
      <div class="header">
        <a href="/">
          <van-image
            class="logo"
            alt="logo"
            fit="contain"
            width="1.5rem"
            height="1.5rem"
            :src="require('@/images/svg/logo.svg')"
          />
        </a>
      </div>
      <div class="desc">
        致力于提高开发效率
        <br />解放生产力
      </div>
    </div>

    <van-tabs v-model="active" animated>
      <van-tab :title="$t('login.phoneVerify')">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form.userName"
            name="userName"
            label="用户名"
            placeholder="用户名"
            label-width="50"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            label-width="50"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field name="savePwd" label="">
            <template #input>
              <van-checkbox v-model="form.savePwd" shape="square"
                >记住我</van-checkbox
              >
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button size="large" type="info" native-type="submit">{{
              $t("login.login")
            }}</van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">
// 引入Vant的组件
import { mapActions } from "vuex";

export default {
  data() {
    return {
      active: 0,
      form: { userName: "", password: "", savePwd: false }
    };
  },
  mounted() {
    this.form.userName = localStorage.getItem("userName");
    this.form.password = localStorage.getItem("password");
    if (this.form.userName && this.form.password) {
      this.form.savePwd = true;
    }
  },
  methods: {
    ...mapActions(["Login", "Logout"]),
    // 登录
    onSubmit(values) {
      //请求后台
      this.Login(values)
        .then(() => {
          if (values.savePwd) {
            localStorage.setItem("userName", values["userName"]);
            localStorage.setItem("password", values["password"]);
          } else {
            localStorage.removeItem("userName");
            localStorage.removeItem("password");
          }

          setTimeout(() => {
            this.$toast.success("登录成功");
            //this.$router.back();
            this.$router.push({ path: "/" });
          }, 1000);
        })
        .catch(ex => {
          this.$toast.fail("登录失败:" + ex);
        });
    },
    getTitle() {
      return process.env.VUE_APP_ProjectName;
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100%;

  background-size: 100%;
  padding-top: 30px;
  position: relative;

  a {
    text-decoration: none;
  }

  .top {
    text-align: center;

    .title {
      text-align: center;
      font-size: 25px;
      color: rgba(0, 0, 0, 0.85);
      font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
      font-weight: 600;
      position: relative;
    }

    .header {
      .logo {
        vertical-align: top;
        border-style: none;
        margin-top: 18px;
      }
    }
    .desc {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 12px;
      margin-bottom: 40px;
    }
  }
}
</style>
